<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入类库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			.show {
				display: block;
			}

			.hide {
				display: none;
			}
			
		
		</style>
	</head>
	<body>

		<!-- 视图 -->
		
		
			
			<div id="app">
				
				<input type="radio" :value="true" v-model="userUser">用户名
				<input type="radio" :value="false"  v-model="userUser">邮箱
				<br>
				
			    <span v-if="userUser">
			        <label for="username"> 用户名</label>
			        <input type="text" id="username" placeholder="请输入用户名"  value=""  key="username"/>
			    </span>
			
			    <span v-else>
			        <label for="email"> 邮箱</label>
			        <input type="text" id="email" placeholder="请输入邮箱"   key="email"/>
			    </span>
			
					<input type="button" value="登录" />
			</div>



		<!-- 把 vuejs管理的数据跟 视图进行双向绑定-->
		<script>
			let vm = new Vue({
				el: "#app",
				data: {
					userUser: true,
					
				}
			})
		</script>



	</body>
</html>
